"use client"
import styles from './page.module.scss'
import cx from 'classnames';
import { Button, Form, Input, message, Upload, Image, Radio, Cascader, Row, Col } from 'antd';
import { LoadingOutlined, PlusOutlined, UserOutlined, LockOutlined, BankOutlined, MobileOutlined, IdcardOutlined } from '@ant-design/icons';
import { useRouter } from 'next/navigation';
import { login, addUser } from '@/api/usersApi'
import { useState } from 'react';
import adressData from '@/utils/adressData.json'

export default function Home() {
  const router = useRouter()
  const [messageApi, contextHolder] = message.useMessage()
  const [type, setType] = useState('登录');
  const [usertype, setUserType] = useState('个人');

  // 登录
  const onFinish = async (values: any) => {
    values = { ...values }
    if (values.password === 'admin') {
      messageApi.success(`管理员账号${type}成功`)
      setTimeout(() => { router.push('/admin') }, 500)
      return
    }
    const res = (type === '登录' ? await login(values) : await addUser(values))
    console.log(res);
    if (res?.code === 200) {
      if (res.data.status === '冻结') {
        messageApi.error('账号已被冻结')
        return
      }
      messageApi.success(`用户账号${type}成功`)
      localStorage.setItem('userInfo', JSON.stringify(res.data))
      localStorage.setItem('token', res.token)
      setTimeout(() => { router.push('/clients') }, 500)
    }
    if (res?.code === 300) {
      messageApi.error('密码输入错误')
    }
  };

  return (
    <div className={styles['login']}>
      <h1 className={cx(styles['title'], styles['h1'])} >
        绿能芯租
      </h1>
      <main className={styles['main']} style={{ width: type === '登录' ? '300px' : '500px' }}>
        <div className={styles['top']}>
          <span>欢迎{type}</span>
          <span onClick={() => setType(type === '登录' ? '注册' : '登录')}>{type === '登录' ? '前往注册' : '返回登录'}&gt;</span>
        </div>
        <div className={styles['line']}></div>
        <Form
          className={styles['form']}
          name="basic"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          style={{ maxWidth: 600 }}
          initialValues={{ customerType: "个人" }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            className={styles['label']}
            name="customerType"
          >
            <Radio.Group
              block
              options={[
                { label: `个人${type}`, value: '个人' },
                { label: `企业${type}`, value: '企业' },
              ]}
              optionType="button"
              buttonStyle="solid"
              onChange={(e: any) => setUserType(e.target.value)}
            />
          </Form.Item>
          <Form.Item
            className={styles['label']}
            name="name"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input prefix={<UserOutlined />} placeholder='请输入您的用户名' />
          </Form.Item>

          <Form.Item
            className={styles['label']}
            name="password"
            rules={[{ required: true, message: "密码不能为空" }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder='请输入您的密码' />
          </Form.Item>
          {type === '注册' && usertype === '企业' && <Form.Item
            className={styles['label']}
            name="companyName"
            rules={[{ required: true, message: "企业名称不能为空" }]}
          >
            <Input prefix={<BankOutlined />} placeholder='请输入企业名称' />
          </Form.Item>}
          {type === '注册' && <Form.Item
            className={styles['label']}
            name="phone"
            rules={[{ required: true, message: "手机号不能为空" }]}
          >
            <Input prefix={<MobileOutlined />} placeholder='请输入您的手机号' />
          </Form.Item>}
          {type === '注册' && <Form.Item
            className={styles['label']}
            name="idCard"
            rules={[{ required: true, message: "身份证不能为空" }]}
          >
            <Input prefix={<IdcardOutlined />} placeholder='请输入您的身份证' />
          </Form.Item>}
          {type === '注册' && <Form.Item
            className={styles['label']}
            name="address"
            rules={[{ required: true, message: "地址不能为空" }]}
          >
            <Cascader options={adressData} placeholder='请选择地址' />
          </Form.Item>}

          <Form.Item label={null}>
            <Button className={styles['btn']} type="primary" htmlType="submit" block>
              {type === '登录' ? '立即登录' : '注册新用户'}
            </Button>
          </Form.Item>
        </Form>
      </main>
      {/* 消息提示，react18以上版本需要这样展示 */}
      {contextHolder}
    </div>
  );
}
